<template>
  <div>
    <el-dialog
      modal-class="edit-time-dialog"
      v-model="_isOpen"
      width="520"
      align-center
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cancelClick"
    >
      <template #header>
        <h4 class="f18"><i class="icon"></i>修改合作时间</h4>
      </template>
      <template #default>
        <el-form inline :model="form" ref="formRef" label-width="auto" label-position="left">
          <el-form-item label="合作时间" prop="time" :rules="{ required: false, message: '请选择', trigger: ['blur'] }">
            <el-date-picker v-model="form.time" type="date" placeholder="请选择" style="width: 100%" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <div style="flex: auto">
            <el-button type="info" @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="confirmClick" :loading="loading">确认</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { Search } from "@element-plus/icons-vue";

const emit = defineEmits(["update:isOpen", "changeAttr"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        detail: "",
        submitFun: null
      };
    }
  }
});
const form = ref({});
const formRef = ref();
const loading = ref(false);

watch(
  () => props.optionInfo,
  val => {
    console.log("传递过来的详情", val);
    // form.value.name = val.detail.name;
  },
  { deep: true, immediate: true }
);
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const cancelClick = () => {
  _isOpen.value = false;
  formRef.value.resetFields();
  form.value = {};
  loading.value = false;
  // emit("changeAttr");
};
const confirmClick = async () => {
  loading.value = true;
  props.optionInfo.submitFun && (await props.optionInfo.submitFun(form.value));
  _isOpen.value = false;
  form.value = {};
  loading.value = false;
  // emit("changeAttr");
};

defineExpose({});
</script>

<style lang="scss">
.edit-time-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0 24px 20px 24px;
      .icon {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
        margin-right: 8px;
        margin-bottom: 3px;
      }
    }
    .el-dialog__body {
      padding: 20px;
      .el-form-item {
        width: 100%;
      }
    }
    .el-dialog__footer {
      padding-top: 0;
      text-align: center;
    }
  }
  .dialog-footer {
    // box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
.el-button--primary {
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
</style>
